<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .div1{
            width:300px;
            height: 50px;
            background: red;
        }

        .div2{
            width:300px;
            height: 50px;
            background: yellow;
        }

        .div3{
            width:300px;
            height: 50px;
            background: green;
        }

    </style>
    
</head>
<body>
<h1>on 绑定多种事件</h1>
on 绑定一个事件
<div class="div1">
    
</div>
on 绑定两个事件
<div class="div2">

</div>
on绑定两个函数
<div class="div3">

</div>
</body>
<script type="text/javascript" src="js/jquery-3.1.0.js"></script>
<script type="text/javascript">
    $(".div1").on("click",function () {
        $(this).html("绑定一个点击事件")
    })
    //绑定两种事件 都执行这一个函数
    $(".div2").on("mousedown mouseup",function () {
        $(this).text("mousedown")
    })
    //绑定多个事件，每个事件执行不同的函数。
    $(".div3").on(
            {
                mousedown:function(){
                    $(this).html("mousedown")
                },
                mouseup:function() {
                    $(this).html("mouseup")
                }
            })

</script>
</html>